<template>
  <div class="cinema-content">
    <van-nav-bar title="影院" class="navBar" fixed placeholder />
    <!-- 头部：搜索+定位 -->
    <div class="cinema-header">
      <span class="location" @click="toCity">
        <span style="font-size: 14px">{{ newCity }}</span>
        <i class="subscript" />
      </span>
      <van-search
        v-model="value"
        placeholder="搜影院"
        class="search"
        @click="toSearch"
      />
    </div>
    <!-- 筛选 -->
    <div class="cinema-screening" @click="prohibit">
      <div class="location">
        <span>全城</span>
        <i class="subscript"></i>
      </div>
      <div class="location">
        <span>品牌</span>
        <i class="subscript"></i>
      </div>
      <div class="location">
        <span>筛选</span>
        <i class="subscript"></i>
      </div>
    </div>
    <!-- 影院列表 -->
    <div class="cinemas-list">
      <div
        class="cinema-item"
        v-for="cinemaInfo in cinemaInfo"
        :key="cinemaInfo.id"
        @click="toDetail(cinemaInfo.id)"
      >
        <div class="item-left">
          <div class="title-top">
            <span class="title">{{ cinemaInfo.title }}</span>
            <span class="price"
              ><i class="amount">{{ cinemaInfo.price }} </i>元起</span
            >
          </div>
          <div class="address">{{ cinemaInfo.address }}</div>
          <van-tag
            style=""
            plain
            type="primary"
            size="mini"
            class="tag"
            v-for="(tag, index) in cinemaInfo.tags"
            :key="index"
            :color="
              tag === '折扣卡' || tag === '小吃' ? tagColor[1] : tagColor[0]
            "
            >{{ tag }}</van-tag
          >
          <div class="concession">
            <img :src="cinemaInfo.discountImgUrl" class="car" />{{
              cinemaInfo.discountText
            }}
          </div>
        </div>
        <div class="cinema-distance">{{ cinemaInfo.distance }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCinemas } from "@/api/index";
import { Toast } from "vant";
export default {
  name: "cinema",
  data() {
    return {
      value: "",
      cinemaInfo: [],
      tagColor: ["#589daf", "#f90"],
      newCity: "定位失败",
    };
  },
  methods: {
    toCity() {
      this.$router.push("/city");
    },
    toSearch() {
      this.$router.push("/search");
    },
    toDetail(cinemaId) {
      this.$router.push({ name: "cinemadetail", query: { cinemaId } });
    },
    prohibit() {
      Toast("在售影院较少，暂不支持筛选");
    },
  },
  mounted() {
    // 获取数据
    reqCinemas().then(
      (response) => {
        if (response) {
          this.cinemaInfo = response.data;
        }
      },
      (error) => {
        alert(error.message);
      }
    );
  },
  // 切换过程钩子
  activated: function () {
    this.$bus.$on("changeNewCity", (val) => {
      this.newCity = val;
    });
  },
};
</script>

<style lang="less" scoped>
.cinema-content {
  .cinema-header {
    display: flex;
    height: 3.4rem;
    padding-left: 1rem;
    .location {
      width: 20%;
      justify-content: space-between;
      align-items: center;
    }
    .search {
      width: 80%;
    }
  }
  .cinema-screening {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    border-top: 0.04rem solid rgb(226, 224, 224);
    border-bottom: 0.04rem solid rgb(226, 224, 224);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    .location {
      border-right: 0.004rem solid rgb(226, 224, 224);
      padding: 0 2.4rem;
      span {
        padding-right: 3px;
      }
      &:last-of-type {
        border: none;
      }
    }
  }
  .cinemas-list {
    .cinema-item {
      min-height: 7rem;
      display: flex;
      justify-content: space-between;
      margin: 1rem 1rem;
      border-bottom: 0.004rem solid rgb(226, 224, 224);
      .item-left {
        width: 90%;
        white-space: nowrap; 
        overflow: hidden;
        .title-top {
          .title {
            font-size: 1.1rem;
            padding-right: 1rem;
          }
          .price {
            color: #eb1c1c;
            .amount {
              font-size: 1.1rem;
            }
          }
          padding-bottom: 0.4rem;
        }
        .address {
          font-size: 0.8rem;
          color: rgb(148, 147, 147);
          padding-bottom: 0.4rem;
        }
        .tag {
          margin: 0 0.1rem;
          margin-bottom: 0.4rem;
          
        }
        .concession {
          color: rgb(161, 160, 160);
          font-size: 0.7rem;
          align-items: center;
          .car {
            width: 0.9rem;
            padding-right: 0.5rem;
          }
        }
      }
      .cinema-distance {
        line-height: 7rem;
        text-align: center;
        color: rgb(99, 98, 98);
      }
    }
  }
}
.location {
  display: flex;
  .subscript {
    margin-top: 0.4rem;
    border: 0.4rem solid transparent;
    border-top-color: rgb(235, 233, 233);
  }
}
</style>